<template>
  <div>
    <el-table
      :data="fenyeList"
      height="450"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      :header-cell-style="{ background: '#8cc5ff' }"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column prop="vbillcode" label="采购入库单据号" width="180">
      </el-table-column>
      <el-table-column prop="crowno" label="行号" width="80"> </el-table-column>
      <el-table-column prop="cwarehouse_name" label="库房名称">
      </el-table-column>
      <el-table-column prop="sto_unit_id" label="货位号"> </el-table-column>
      <el-table-column prop="vbatchcode" sortable label="批号">
      </el-table-column>
      <el-table-column prop="code" label="商品编码"> </el-table-column>
      <el-table-column prop="name" label="商品名称"> </el-table-column>
      <el-table-column prop="materialspec" label="商品规格"> </el-table-column>
      <el-table-column prop="vvendbatchcode" label="供应商批号">
      </el-table-column>
      <el-table-column prop="customer_name" label="客户名称"> </el-table-column>
      <el-table-column prop="sku_num" label="数量"> </el-table-column>
    </el-table>
    <el-pagination
      background
      layout=" total,prev, pager, next, sizes,jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
    };
  },
  computed: {
    // 根据当前页码和每页条数计算当前页的数据
    fenyeList() {
      const startIndex = (this.pageNum - 1) * this.pageSize;
      return this.tableData.slice(startIndex, startIndex + this.pageSize);
    },
  },
  watch: {
    tableList(newData) {
      this.tableData = newData;
      this.total = newData.length;
    },
  },
  props: ["tableList"],
  methods: {
    //分页
    handleSizeChange(newsize) {
      this.pageNum = 1;
      this.pageSize = newsize;
    },
    handleCurrentChange(newpage) {
      this.pageNum = newpage;
    },
    tableRowClassName({ row, rowIndex }) {
      return rowIndex % 2 === 0 ? "warning-row" : "success-row";
    },
  },
};
</script>
<style scoped>
/deep/.el-table .warning-row {
  background: #e6f7ff;
}

/deep/.el-table .success-row {
  background: ##e0f8e0;
}

.el-pagination {
  float: right;
  margin: 20px;
}
</style>
